<template>
  <div class="can-container">
    <span class="title">可交易项目</span>
    <el-divider></el-divider>
    <div class="form">
      <el-form
        :inline="true"
        label-position="right"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-form-item label="项目编号">
          <el-input v-model="listQuery.number" placeholder="项目编号"></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="listQuery.name" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="合格证编号">
          <el-input v-model="listQuery.hgzbh" placeholder="合格证编号"></el-input>
        </el-form-item>
        <el-form-item label="项目级别">
          <el-select v-model="listQuery.level" placeholder="--请选择--">
            <el-option v-for="(item,index) in levelList" :key="index" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在乡镇">
          <el-select v-model="listQuery.district" placeholder="--请选择--">
            <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <div class="table-box">
        <el-table :data="tableData" border style="width: 100%" v-loading="loading">
          <el-table-column type="index" show-overflow-tooltip label="序号" width="80"></el-table-column>
          <el-table-column prop="number" label="业务编号"></el-table-column>
          <el-table-column prop="businessNumber" label="项目名称"></el-table-column>
          <el-table-column prop="level" label="项目级别"></el-table-column>
          <el-table-column prop="hgzbh" label="合格证编号"></el-table-column>
          <el-table-column prop="tradAbleArea" label="可交易面积(亩)"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import { getList,getLevel,getCity } from "@/api/kjyxm";
import { setTimeout } from "timers";
export default {
  components: {
    xTable
  },
  data() {
    return {
      cityList:[],
      levelList:[],
      listQuery:{
        number:'',
        name:'',
        hgzbh:'',
        level:'',
        district:'',
      },
      loading: false,
      head: {
        date: "业务编号",
        name: "项目名称",
        province: "项目级别",
        city: "合格证编号",
        zip: "可交易面积（亩）",
      },
      formInline: {
        user: "",
        a: "",
        b: "",
        c: "",
        idCard: "",
        state: "",
        type: ""
      },
      tableData: [],
      currentPage: 1,
      dialogFormVisible: false,
      textarea:""
    };
  },
  methods: {
    onSubmit() {
      this.getData(this.formInline);
    },
    sqtcClick(item) {
      console.log(item);
      this.dialogFormVisible = true;
    },
    getCity(){
      getCity().then(res =>{
        this.cityList = res.data
      })
    },
    getData() {
      this.loading = true
      var data={}
      var objArr=this.listQuery
      for (var index in objArr) {
        if(objArr[index]!==''&&objArr[index]!=null){
          data[index]=objArr[index];
        }
      }
      getList(data).then(res =>{
        this.loading = false
        this.tableData = res.data
      }).catch(err =>{
        this.loading = false
      })
    },
    getLevelData(){
      var data={
        enumType:'PROJECT_LEVEL'
      }
      getLevel(data).then(res =>{
        this.levelList = res.data
      })
    },
  },
  mounted() {
    this.getData();
    this.getLevelData();
    this.getCity();
  }
};
</script>

<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.can-container {
  padding: 20px;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: rgba(72, 73, 77, 1);
    line-height: 33px;
  }
}
.table,
.table-box {
  margin-top: 20px;
  .block {
    float: right;
    margin: 30px;
  }
}
.dig-box {
  font-size: 14px;
  color: rgba(99, 100, 102, 1);
  line-height: 28px;
  margin-right: 30px;
}
</style>
